<template>

  <a-layout class="layout">
    <a-layout-header>
        <a-row>
          <a-col :xs="20" :sm="4" :md="4" :lg="4">
            <div class="logo">
              <img src="@/assets/Lizer-logo.svg" class="svg"/>
            </div>
          </a-col>
          <a-col :xs="4" :sm="20" :md="20" :lg="20">
            <a-menu
              v-model:selectedKeys="current"
              mode="horizontal"
              class="head"
              @click="handelClick"
            >
              <a-menu-item key="/introduct">
                <template #icon>
                  <home-outlined />
                </template>
                首页
              </a-menu-item>
              <a-menu-item
                key="/map"
              >
                <template #icon>
                  <appstore-outlined />
                </template>
                地图
              </a-menu-item>
              <a-sub-menu key="sub1">
                <template #icon>
                  <setting-outlined />
                </template>
                <template #title>商品</template>
                <a-menu-item-group title="分类">
                  <a-menu-item key="/cart">商品浏览</a-menu-item>
                  <a-menu-item key="/trycart">试镜间</a-menu-item>
                </a-menu-item-group>
              </a-sub-menu>
              <a-menu-item key="/login">
                  <template #icon>
                        <login-outlined />
                  </template>
                <a rel="noopener noreferrer">
                  登录
                </a>
              </a-menu-item>
            </a-menu>
          </a-col>
        </a-row>
    </a-layout-header>
    <a-layout-content>
      <div :style="{ background: '#fff', padding: '10px', minHeight: '100%',position: 'relative' }">
        <router-view></router-view>
      </div>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import {
  // MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
  HomeOutlined,
  LoginOutlined
} from '@ant-design/icons-vue'
import router from '@/router'
import { useStore } from 'vuex'
export default defineComponent({
  components: {
    HomeOutlined,
    // MailOutlined,
    LoginOutlined,
    AppstoreOutlined,
    SettingOutlined
  },
  setup () {
    const imgList = reactive<string[]>([
      'nav1.png',
      'scs.jpg'
    ])
    const store = useStore()
    const current = ref<string[]>([store.state.selectedMenuKey])
    const handelClick = (item: { key: string }) => {
      router.push(item.key)
      store.commit('setSelectedMenuKey', item.key)
    }

    return {
      current,
      imgList,
      handelClick
    }
  }
})
</script>
<style scoped lang="less">
.logo{
  height: 100%;
  background: #fff;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  .svg{
    height: 100%;
  }
}
.head {
  justify-content: flex-end;
}
.layout{
    height: 100%;
    .ant-layout-header{
      padding: 0;
    }
    .ant-row{
      height: 100%;
      .ant-col{
        height: 100%;
      }
    }
}
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 100%;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
.carousel{
    height: 100%;
}
</style>
